// window.onload=function(){

    var dataEvent = [{
        eventId: "years_1",
        eventPoint:"point_1",
        eventYear: "2016",
        eventImgUrl: "images/event1.jpg",
        eventH: "图片1标题",
        eventP:"图片1内容介绍",
        },
        {
            eventId: "years_2",
            eventPoint:"point_2",
            eventYear: "2017",
            eventImgUrl: "images/event2.jpg",
            eventH: "图片2标题",
            evetnP:"图片2内容介绍"
        },
        {
            eventId: "years_3",
            eventPoint:"point_3",
            eventYear: "2018",
            eventImgUrl: "images/event3.jpg",
            eventH: "图片3标题",
            eventP:"图片3内容介绍"
        },
        {
            eventId: "years_3",
            eventPoint:"point_3",
            eventYear: "2019",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片4标题",
            eventP:"图片4内容介绍"
        },
        {
            eventId: "years_5",
            eventPoint:"point_5",
            eventYear: "2020",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片5标题",
            eventP:"图片5内容介绍"
        },
        {
            eventId: "years_6",
            eventPoint:"point_6",
            eventId: "6",
            eventYear: "2021",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片6标题",
            eventP:"图片6内容介绍"
        },
        {
            eventId: "years_7",
            eventPoint:"point_7",
            eventYear: "2022",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片7标题",
            eventP:"图片7内容介绍"
        },
        {
            eventId: "years_8",
            eventPoint:"point_8",
            eventYear: "2023",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片8标题",
            eventP:"图片8内容介绍"
        },
        {
            eventId: "years_9",
            eventPoint:"point_9",
            eventYear: "2025",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片9标题",
            eventP:"图片9内容介绍"
        },
        {
            eventId: "years_10",
            eventPoint:"point_10",
            eventYear: "2026",
            eventImgUrl: "images/event4.jpg",
            eventH: "图片10标题",
            eventP:"图片10内容介绍"
        }
    ];
    
   //获取元素
var pageWidth = document.documentElement.clientWidth,
pageHeight = document.documentElement.clientHeight,
event_can = document.getElementById("event_can"),
event_ctx = event_can.getContext("2d");
event_can.width = pageWidth;
event_can.height = pageHeight;
var nodes = [],
line = [],
rakes = [],
years = document.getElementsByClassName("years"),
point = document.getElementsByClassName(" point"),
event_text = document.getElementsByClassName("event_text"),
event_h = document.getElementsByClassName("event_h"),
event_p = document.getElementsByClassName("p"),
event_points = document.getElementsByClassName("point"),
event_years = document.getElementById("event_years"),
event_detail = document.getElementById("event_detail"),
inner = document.getElementById("inner"),
inner_item = document.getElementsByClassName("inner_item"),
event_but_next = document.getElementById("event_next"),
event_but_prev = document.getElementById("event_prev"),
indicator_item = document.getElementsByClassName("indicator_item"),
event_index = 0,
event_end = 0,
event_back = document.getElementById("event_back"),
event_image = document.getElementsByClassName("event_image"),
eventUl = document.getElementById('indicators'),
eventLi = eventUl.getElementsByTagName('li'),
eventImg = document.getElementsByClassName('event_imageBox'),
eventNum = 0,
DivImg=document.getElementsByClassName("event_imageBox")[0].getElementsByTagName("img");

event_detail.style.width = pageWidth + "px" ;
event_detail.style.height = pageHeight + "px";
event_detail.style.width = pageWidth + "px" ;
event_detail.style.height = pageHeight + "px";

event_years.innerHTML='';
event_years.innerHTML='';
eventUl.innerHTML ='';
inner.innerHTML='';
eventImg.innerHTML='';
//动态生成页面数据
for (var i=0;i<dataEvent.length;i++){
event_years.innerHTML += "<div id='"+dataEvent[i].eventId+"' class="+years+">"+dataEvent[i].eventYear+"</div>";
event_years.innerHTML += "<div id='"+dataEvent[i].eventPoint+"' class="+point+"></div>";
eventUl.innerHTML += "<div id='"+i+"' class="+indicator_item+"></div>";
inner.innerHTML +="<div class="+inner_item+"><div class="+event_text+"><h class="+event_h+">"+dataEvent[i].eventH+"</h><p class="+event_p+">"+dataEvent[i].enetP+"</p></div>";
eventImg.innerHTML += "<img src='"+dataEvent[i].eventImgUrl+" class="+event_image+">";
}
console.log('aaaaaaaaaaaaaaaa');
console.log(eventImg.innerHTML)




    function addResizeHandle(){
        if(window.addEventListener){
            window.addEventListener("resize",eventResize);
        }else{
            window.attchEvent("on" + "resize",eventResize);
        }
    }
    addResizeHandle();
    function eventResize(){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;

        drawPath();
        inner.style.transition = "left 0s";
        event_detail.style.width = pageWidth + "px" ;
        event_detail.style.height = pageHeight + "px";
        for(let i=0;i<inner_item.length;i++){
            inner_item[i].style.width = pageWidth + "px";
            inner_item[i].style.height = pageHeight + "px";
        }
        inner.style.width = pageWidth * inner_item.length +"px";
        inner.style.left = (-event_index * pageWidth) + "px";
        setTimeout(function(){
            inner.style.transition = "left 1s";
        },100);

        // event_detail.style.width = pageWidth + "px" ;
        // event_detail.style.height = pageHeight + "px";
    }



    function drawPath(){//事件页面画路线
        var x = [];
        var y = [];
        var j = [];
        var k = [];
        nodes = [];
        line = [];
        rakes = [];
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
        event_can.width = pageWidth;
        event_can.height = pageHeight;
       
        event_ctx.lineWidth = 1;
        event_ctx.strokeStyle = "#737373";
        event_ctx.setLineDash([8,8]);
        event_ctx.beginPath();
        event_ctx.moveTo(pageWidth*0,pageHeight*0.5);
        event_ctx.lineTo(pageWidth*0.1,pageHeight*0.52);//1
        x[0] = pageWidth*0.1;
        y[0] = pageHeight*0.52;
        event_ctx.lineTo(pageWidth*0.19,pageHeight*0.5);//2
        x[1] = pageWidth*0.19;
        y[1] = pageHeight*0.5;
        event_ctx.lineTo(pageWidth*0.28,pageHeight*0.53);//3
        x[2] = pageWidth*0.28;
        y[2] = pageHeight*0.53;
        event_ctx.lineTo(pageWidth*0.39,pageHeight*0.46);//4
        x[3] = pageWidth*0.39;
        y[3] = pageHeight*0.46;
        event_ctx.lineTo(pageWidth*0.49,pageHeight*0.52);//5
        x[4] = pageWidth*0.49;
        y[4] = pageHeight*0.52;
        event_ctx.lineTo(pageWidth*0.6,pageHeight*0.48);//6
        x[5] = pageWidth*0.6;
        y[5] = pageHeight*0.48;
        event_ctx.lineTo(pageWidth*0.68,pageHeight*0.58);//7
        x[6] = pageWidth*0.68;
        y[6] = pageHeight*0.58;
        event_ctx.lineTo(pageWidth*0.76,pageHeight*0.52);//8
        x[7] = pageWidth*0.76;
        y[7] = pageHeight*0.52;
        event_ctx.lineTo(pageWidth*0.83,pageHeight*0.56);//9
        x[8] = pageWidth*0.83;
        y[8] = pageHeight*0.56;
        event_ctx.lineTo(pageWidth*0.9,pageHeight*0.52);//10
        x[9] = pageWidth*0.9;
        y[9]= pageHeight*0.52;
        event_ctx.lineTo(pageWidth*1,pageHeight*0.56);
        event_ctx.stroke();
        event_ctx.closePath();
        for(i=0;i<10;i++){
            var node = {
            x:0,
            y:0
            };
            node.x = x[i];
            node.y = y[i];
            nodes.push(node);
        }


        event_ctx.fillStyle = "#fff";
        event_ctx.setLineDash([0,0]);
        event_ctx.beginPath();
        event_ctx.moveTo(pageWidth*0.1,pageHeight*0.52);
        event_ctx.arc(pageWidth*0.1,pageHeight*0.52,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.19,pageHeight*0.5);
        event_ctx.arc(pageWidth*0.19,pageHeight*0.5,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.28,pageHeight*0.53);
        event_ctx.arc(pageWidth*0.28,pageHeight*0.53,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.39,pageHeight*0.46);
        event_ctx.arc(pageWidth*0.39,pageHeight*0.46,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.49,pageHeight*0.52);
        event_ctx.arc(pageWidth*0.49,pageHeight*0.52,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.6,pageHeight*0.48);
        event_ctx.arc(pageWidth*0.6,pageHeight*0.48,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.68,pageHeight*0.58);
        event_ctx.arc(pageWidth*0.68,pageHeight*0.58,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.76,pageHeight*0.52);
        event_ctx.arc(pageWidth*0.76,pageHeight*0.52,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.83,pageHeight*0.56);
        event_ctx.arc(pageWidth*0.83,pageHeight*0.56,1.5,0,Math.PI*2);
        event_ctx.moveTo(pageWidth*0.9,pageHeight*0.52);
        event_ctx.arc(pageWidth*0.9,pageHeight*0.52,1.5,0,Math.PI*2);
        event_ctx.fill();
        event_ctx.closePath();

        event_ctx.setLineDash([0,0]);
        //event_ctx.lineWidth = 3;
        event_ctx.strokeStyle = "#00ffb8";
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.1,pageHeight*0.52,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.19,pageHeight*0.5,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.28,pageHeight*0.53,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.39,pageHeight*0.46,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.49,pageHeight*0.52,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.6,pageHeight*0.48,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.68,pageHeight*0.58,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.76,pageHeight*0.52,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.83,pageHeight*0.56,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.beginPath();
        event_ctx.arc(pageWidth*0.9,pageHeight*0.52,6,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.closePath();

        event_ctx.strokeStyle = "#737373";
        event_ctx.beginPath();
        event_ctx.moveTo(pageWidth*0.1,pageHeight*0.52);
        event_ctx.lineTo(pageWidth*0.12,pageHeight*0.37);//1
        j[0] = pageWidth * 0.12;
        k[0] = pageHeight * 0.37;
        event_ctx.moveTo(pageWidth*0.19,pageHeight*0.5);
        event_ctx.lineTo(pageWidth*0.21,pageHeight*0.67);//2
        j[1] = pageWidth*0.21;
        k[1] = pageHeight*0.67;
        event_ctx.moveTo(pageWidth*0.28,pageHeight*0.53);
        event_ctx.lineTo(pageWidth*0.26,pageHeight*0.33);//3
        j[2] = pageWidth*0.26;
        k[2] = pageHeight*0.33;
        event_ctx.moveTo(pageWidth*0.39,pageHeight*0.46);
        event_ctx.lineTo(pageWidth*0.37,pageHeight*0.68);//4
        j[3] = pageWidth*0.37;
        k[3] = pageHeight*0.68;
        event_ctx.moveTo(pageWidth*0.49,pageHeight*0.52);
        event_ctx.lineTo(pageWidth*0.51,pageHeight*0.36);//5
        j[4] = pageWidth*0.51;
        k[4] = pageHeight*0.36;
        event_ctx.moveTo(pageWidth*0.6,pageHeight*0.48);
        event_ctx.lineTo(pageWidth*0.58,pageHeight*0.68);//6
        j[5] = pageWidth*0.58;
        k[5] = pageHeight*0.68;
        event_ctx.moveTo(pageWidth*0.68,pageHeight*0.58);
        event_ctx.lineTo(pageWidth*0.66,pageHeight*0.43);//7
        j[6] = pageWidth*0.66;
        k[6] = pageHeight*0.43;
        event_ctx.moveTo(pageWidth*0.76,pageHeight*0.52);
        event_ctx.lineTo(pageWidth*0.78,pageHeight*0.33);//8
        j[7] = pageWidth*0.78;
        k[7] = pageHeight*0.33;
        event_ctx.moveTo(pageWidth*0.83,pageHeight*0.56);
        event_ctx.lineTo(pageWidth*0.81,pageHeight*0.76);//9
        j[8] = pageWidth*0.81;
        k[8] = pageHeight*0.76;
        event_ctx.moveTo(pageWidth*0.9,pageHeight*0.52);
        event_ctx.lineTo(pageWidth*0.88,pageHeight*0.39);//10
        j[9] = pageWidth*0.88;
        k[9] = pageHeight*0.39;
        event_ctx.stroke();
        event_ctx.closePath();
        for(var i=0;i<10;i++){//存储直线延伸的点
            var node = {
                x:0,
                y:0
            };
            node.x = j[i];
            node.y = k[i];
            line.push(node);
        }

        for(var i=0;i<10;i++){//存储直线的斜率，为缓慢画直线做准备
            var rake = (nodes[i].y-line[i].y)/(nodes[i].x-line[i].x);
            rakes.push(rake);
        }


        event_ctx.fillStyle = "#00ffb8";
        event_ctx.fillRect(pageWidth*0.119,pageHeight*0.36,6,6);
        event_ctx.fillRect(pageWidth*0.208,pageHeight*0.671,6,6);
        event_ctx.fillRect(pageWidth*0.259,pageHeight*0.329,6,6);
        event_ctx.fillRect(pageWidth*0.368,pageHeight*0.681,6,6);
        event_ctx.fillRect(pageWidth*0.508,pageHeight*0.358,6,6);
        event_ctx.fillRect(pageWidth*0.578,pageHeight*0.681,6,6);
        event_ctx.fillRect(pageWidth*0.658,pageHeight*0.428,6,6);
        event_ctx.fillRect(pageWidth*0.778,pageHeight*0.329,6,6);
        event_ctx.fillRect(pageWidth*0.808,pageHeight*0.761,6,6);
        event_ctx.fillRect(pageWidth*0.878,pageHeight*0.389,6,6);

    }
    drawPath();

    function event_delayDrawDash(num){//事件页面画虚线圈
        event_ctx.strokeStyle = "#737373";
        event_ctx.lineWidth = 1;
        event_ctx.setLineDash([3,3]);
        event_ctx.beginPath();
        event_ctx.arc(nodes[num].x,nodes[num].y,20,0,Math.PI*2);
        event_ctx.stroke();
        event_ctx.closePath();
    }
    var arc_timer = "";//缓慢画实线圈时间器，圆圈画完停止动作
    var delay_arc_timer = ""//缓慢画实线圈时间器，鼠标移开年份，停止动作
    function event_delayDrawLine(begin_x,begin_y,num){//事件页面缓慢画实线
        line_timer = "";//缓慢画直线时间器
        var x= nodes[num].x-line[num].x;//需要画直线的长度
        event_ctx.lineWidth = 1;
        event_ctx.strokeStyle = "#fff";
        event_ctx.setLineDash([0,0]);

        event_ctx.beginPath();
        event_ctx.moveTo(begin_x,begin_y);
        var end_x = begin_x+1/40*(x);
        var end_y = begin_y+rakes[num]*1/40*(x);
        event_ctx.lineTo(end_x,end_y);
        event_ctx.stroke();
        event_ctx.closePath();
        line_timer = setTimeout(function(){
            event_delayDrawLine(end_x,end_y,num);
        },20);
        if(x>0){
            if(end_x+0.5>=nodes[num].x){
                clearTimeout(line_timer);
            }
        }else{
            if(end_x-0.5<=nodes[num].x){
                clearTimeout(line_timer);
            }
        }
    }
    function event_delayDrawArc(central_x,central_y,begin){//事件页面缓慢画实线圈
        event_ctx.lineWidth = 1;
        event_ctx.setLineDash([0,0]);
        event_ctx.strokeStyle = "#c5c5c5";
        event_ctx.beginPath();
        var end = begin+Math.PI/10;
        event_ctx.arc(central_x,central_y,20,0,end);
        event_ctx.stroke();
        event_ctx.closePath();
        arc_timer = setTimeout(function(){
            event_delayDrawArc(central_x,central_y,end);
        },30);
        if(end>=Math.PI*2){
            clearTimeout(arc_timer);
        }
    }
    for(let i=0;i<years.length;i++){//鼠标接触年份，缓慢画直线，画实线圈
        years[i].onmouseover=function(){
            event_delayDrawDash(i);
            event_delayDrawLine(line[i].x,line[i].y,i);
            delay_arc_timer = setTimeout(function(){
                event_delayDrawArc(nodes[i].x,nodes[i].y,0);
            },800);
        }
    }
    for(let i=0;i<years.length;i++){//鼠标移开年份，重绘整个画布
        years[i].onmouseout=function(){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
            event_ctx.clearRect(0,0,pageWidth,pageHeight);
            clearTimeout(line_timer);
            clearTimeout(delay_arc_timer);
            clearTimeout(arc_timer);
            drawPath();
        }
    }
    for(let i=0;i<event_points.length;i++){//鼠标接触拐点，先画虚线，再缓慢画实线圈
        event_points[i].onmouseover=function(){
            event_delayDrawDash(i);
            event_delayDrawArc(nodes[i].x,nodes[i].y,0);
        }
    }
    for(let i=0;i<event_points.length;i++){//鼠标移开拐点，停止动作，重绘画布
        event_points[i].onmouseout=function(){
            clearTimeout(arc_timer);
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
            event_ctx.clearRect(0,0,pageWidth,pageHeight);
            drawPath();
        }
    }
    for(let i=0;i<years.length;i++){//点击年份，出现轮播图
        years[i].onclick=function(){
            event_years.style.visibility = "hidden";
            event_years.style.zIndex = "-10";
            event_detail.style.visibility = "visible";
            event_detail.style.zIndex = "10";
            inner.style.transition = "left 0s";
            event_index = i;
            inner.style.left = (-i * pageWidth) + "px";
            event_showButton();
            showEventPic();
            setTimeout(function(){
               inner.style.transition = "left 1s";
            },100);

        }
    }
    for(let i=0;i<event_points.length;i++){//点击拐点，出现轮播图
        event_points[i].onclick=function(){
            event_years.style.visibility = "hidden";
            event_years.style.zIndex = "-10";
            event_detail.style.visibility = "visible";
             event_detail.style.zIndex = "10";
             inner.style.transition = "left 0s";
             event_index = i;
             inner.style.left = (-i * pageWidth) + "px";
             event_showButton();
             setTimeout(function(){
                inner.style.transition = "left 1s";
             },100);

        }
    }

    event_back.onclick=function(){//点击三角形返回，回到事件路线页面
        event_years.style.visibility = "visible";
        event_years.style.zIndex = "10";
        event_detail.style.visibility = "hidden";
        event_detail.style.zIndex = "-10";
    }




    
    for(let i=0;i<inner_item.length;i++){//轮播图子项
        inner_item[i].style.width = pageWidth + "px";
        inner_item[i].style.height = pageHeight + "px";
    }
    inner.style.width = pageWidth * inner_item.length +"px";



    function event_next(){//轮播图下一张
        event_start = new Date().getTime();//动作开始时间
        var oldLeft = parseInt(inner.style.left);
        if(event_start-event_end<1000){//1s内不得重复动作
            return;
        }
        if(oldLeft<=-(inner_item.length-1)*pageWidth){
            inner.style.left = 0 +"px";
            event_end = new Date().getTime();
            event_index=0;
            event_showButton();
            showEventPic();
        }else{
            inner.style.left = oldLeft - pageWidth +"px";
            event_end = new Date().getTime();
            event_index += 1;
            event_showButton();
            showEventPic();
        }


    }

    function event_prev(){//轮播图上一张
        event_start = new Date().getTime();
        var oldLeft = parseInt(inner.style.left);
        if(event_start-event_end<1000){//1s内不得重复动作
            return;
        }
        if(oldLeft>=0){
            inner.style.left = -((inner_item.length-1)*pageWidth) +"px";
            event_end = new Date().getTime();
            event_index = indicator_item.length-1;
            event_showButton();
            showEventPic()
        }else{
            inner.style.left = oldLeft + pageWidth +"px";
            event_index -= 1;
            event_end = new Date().getTime();
            event_showButton();
            showEventPic();
        }

    }
    event_but_next.onclick = function(){
        event_next();
    }
    event_but_prev.onclick = function(){
        event_prev();
    }
    for(let i=0;i<indicator_item.length;i++){//点击按钮，出现相应页面
        indicator_item[i].onclick=function(){
            if(i==event_index){
                return;
            }
            event_index = i;
            event_showButton();
            inner.style.left = (-i * pageWidth) + "px";
            showEventPic();
        }
    }
    function event_showButton(){//切换按钮样式
        for(var j=0;j<indicator_item.length;j++){
                indicator_item[j].classList.remove("active");
            }
            indicator_item[event_index].classList.add("active");
    }
    function showEventPic(){//缩放出现图片
        for(let i=0;i<event_image.length;i++){
            if(event_image[i].style.opacity==1){
                event_image[i].style.transform = "scale(0.75,0.75)";
                event_image[i].style.opacity = 0;
                break;
            }

        }
        setTimeout(function(){
            event_image[event_index].style.opacity=1;
            event_image[event_index].style.transform="scale(1,1)";
                },800);
    }

//}